<template>
    
 <div>
    <!-- 三元绑定 -->
     <!-- :class=" 条件 ? '类名1' : '类名2' " -->
    <p :class="isActive ? 'active' : '' ">激活(三元绑定)</p>
    <br/><br/>

    <!-- 对象绑定 -->
     <!-- :class=" { 类名1: 布尔值1 , 类名2: 布尔值2 , ......} " -->
    <p :class="{ active:isActive }">激活(对象绑定)</p>
    <br/><br/>

    <!-- 静态class与动态class 会合并（可以共存） -->
    <p
        class="still"
        :class="{ active:isActive }">激活(合并)</p>
     <p  class="still active">激活(合并)</p>

</div>
    
</template>

<script setup>
    import { ref } from 'vue';
    //是否被激活
     const isActive = ref(true)

</script>

<style>
 .active{
    color: greenyellow;
 }
 .still{
    background: red;
 }
</style>